<template>
	<view class="pet-forum-container">
		<!-- 顶部导航栏 -->
		<titleBar title="论坛" :isSubPage="false" :isForum="true"></titleBar>

		<!-- 专家专栏 -->
		<view class="expert-column">
			<view class="section-title">
				<text class="title-text">专家专栏</text>
			</view>
			<scroll-view scroll-x="true" class="expert-scroll" show-scrollbar="false">
				<view v-for="(expert, index) in experts" :key="index" class="expert-card" @click="goExpert(expert)">
					<image :src="expert.avatar" class="expert-avatar"></image>
					<text class="expert-name">{{ expert.name }}</text>
					<text class="expert-title">{{ expert.title }}</text>
				</view>
			</scroll-view>
		</view>

		<!-- 用户社区 -->
		<view class="user-community">
			<view class="section-title">
				<text class="title-text">用户分享</text>
			</view>
			<view v-for="(post, index) in userPosts" :key="index" class="post-card" @click="goTalk(post)">
				<view class="post-header">
					<image :src='post.avatar' class="user-avatar"></image>
					<text class="username">{{ post.username }}</text>
				</view>
				<text class="post-content">{{ post.content }}</text>
				<image :src="post.picture" class="post-image"></image>
				<!-- <view class="post-interactions">
					<text class="likes">👍 {{ post.likes }}</text>
					<text class="comments" @click="goTalk(post)">💬 {{ post.comments }}</text>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import titleBar from '@/components/titleBar.vue'
	import {
		userApi,
		dynamics
	} from '@/api/user.js'

	export default {
		components: {
			titleBar
		},
		data() {
			return {
				experts: [{
						id: 1,
						name: '洪医生',
						title: '宠物营养学专家',
						avatar: '/static/forum/doctornv.png'
					},
					{
						id: 2,
						name: '金教授',
						title: '宠物行为专家',
						avatar: '/static/forum/doctorna.png'
					},
					{
						id: 3,
						name: '刘教授',
						title: '宠物行为专家',
						avatar: '/static/forum/doctorna.png'
					},
					{
						id: 4,
						name: '竺教授',
						title: '宠物行为专家',
						avatar: '/static/forum/doctorna.png'
					},
					{
						id: 5,
						name: '郑教授',
						title: '宠物行为专家',
						avatar: '/static/forum/doctorna.png'
					}
				],
				userPosts: []
			}
		},
		mounted() {
			this.getPostDetail()
		},
		methods: {
			async getPostDetail() {
				try {
					const result = await dynamics.getPost()
					// 开始倒计时
					this.userPosts = result
					console.log('获取成功', result);
				} catch (error) {
					uni.showToast({
						title: '获取信息失败: ' + (error.message || '未知错误'),
						icon: 'none'
					});
					console.error('获取失败', error);
				}
			},
			goTalk(post) {
				getApp().globalData.currentArticleAva = post.avatar;
				getApp().globalData.currentArticleName = post.username;
				getApp().globalData.currentArticleId = post.id;
				uni.navigateTo({
					url: `/pages/forum/convercition?id=${post.id}`
				})
			},
			goExpert(expert) {
				getApp().globalData.currentDoctorId = expert.id;
				uni.navigateTo({
					url: `/pages/forum/expert?id=${expert.id}`
				})
			},
		}
	}
</script>

<style scoped>
	.pet-forum-container {
		background-color: #f4f4f4;
		padding-bottom: 20rpx;
	}

	.nav-bar {
		background-color: #F9CB43;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav-title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		position: relative;
		padding-left: 20rpx;
	}

	.title-text::before {
		content: '';
		position: absolute;
		left: 0;
		top: 10rpx;
		height: 30rpx;
		width: 8rpx;
		background-color: #F9CB43;
		border-radius: 4rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin: 20rpx;
		color: #333;
	}

	.expert-scroll {
		white-space: nowrap;
		padding: 0 20rpx;
	}

	.expert-card {
		display: inline-block;
		width: 200rpx;
		text-align: center;
		margin-right: 20rpx;
	}

	.expert-avatar {
		width: 150rpx;
		height: 150rpx;
		border-radius: 75rpx;
	}

	.expert-name {
		display: block;
		font-size: 28rpx;
		margin-top: 10rpx;
	}

	.expert-title {
		display: block;
		font-size: 24rpx;
		color: #666;
	}

	.post-card {
		background-color: white;
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.post-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.user-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		margin-right: 20rpx;
	}

	.username {
		font-size: 28rpx;
		font-weight: bold;
	}

	.post-content {
		font-size: 30rpx;
		margin-bottom: 20rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.post-image {
		width: 100%;
		height: 400rpx;
		border-radius: 20rpx;
		object-fit: cover;
	}

	.post-interactions {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		color: #666;
	}
</style>